<script setup lang="ts">
import { NSpace, NInput, NButton, NCard } from 'naive-ui'
import { onMounted, ref } from 'vue';
import { useSettingsStore } from '../stores/settings'

const settingsStore = useSettingsStore()
const proxy = ref('')
const apiKey = ref('')

onMounted(() => {
    proxy.value = settingsStore.proxy
    apiKey.value = settingsStore.apiKey
})

function saveProxy() {
    settingsStore.updateProxy(proxy.value)
}

function saveApiKey() {
    settingsStore.updateApiKey(apiKey.value)
}

</script>

<template>
    <n-card title="settings" style="width: 500px;">
        <n-space vertical>
            <n-space>
                <div class="label">proxy</div>
                <n-input type="text" v-model:value="proxy" clearable placeholder="https://api.openai.com" style="width: 220px;" />
                <n-button @click="saveProxy">save</n-button>
            </n-space>
            <n-space>
                <div class="label">apiKey</div>
                <n-input type="password" v-model:value="apiKey" show-password-on="click" clearable placeholder="sk-xxxx" style="200px"/>
                <n-button @click="saveApiKey">save</n-button>
            </n-space>
        </n-space>

    </n-card>
</template>
<style scoped>
.label {
    width: 60px;
}
</style>